<template>
    <div id="olddeliverdetail" v-cloak>
        <Header :goback="goback" :title="header_title"></Header>
        <div class="topheader pd">
            <van-steps :active="active" active-icon="success" active-color="#38f">
                <van-step v-if="detail.postStatus < 4" class="steplist" v-for="(item, i) in steplist" :key="i">
                    <template v-slot:active-icon>
                        <div class="step-item">
                            <div class="steps-active-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <span class="stepsty font36" :class="active == i ? 'title-active' : ''">
                                {{ item }}
                            </span>
                        </div>
                    </template>
                    <template v-slot:inactive-icon>
                        <div class="step-item">
                            <div v-if="active > i" class="steps-finish-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <div v-else class="steps-inactive-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <span v-if="i != 2">
                                <span v-if="active == 2 || active == 3" class="stepsty font36" :class="active > i ? 'title-finish' : 'title-inactive'">
                                    {{ item }}
                                </span>
                                <span v-else class="stepsty font36" :class="active > i ? 'title-finish' : 'title-inactive'">
                                    {{ item }}
                                </span>
                            </span>
                            <span v-else>
                                <span v-if="active == 2 || active == 3" class="stepsty font36" :class="active > i ? 'title-finish' : 'title-inactive'">
                                    {{ item }}
                                </span>
                                <span v-else class="stepsty width2 font36" :class="active > i ? 'title-finish' : 'title-inactive'">
                                    {{ item }}
                                </span>
                            </span>
                        </div>
                    </template>
                </van-step>
                <van-step v-if="detail.postStatus == 4" v-for="(item, i) in steplist" :key="i">
                    <template v-slot:active-icon>
                        <div class="step-item">
                            <div class="steps-active-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <span class="stepsty font36" :class="active == i ? 'title-active' : ''">
                                {{ item }}
                            </span>
                        </div>
                    </template>
                    <template v-slot:inactive-icon>
                        <div class="step-item">
                            <div v-if="active > i" class="steps-finish-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <div v-else class="steps-inactive-icon">
                                <span>{{i + 1}}</span>
                            </div>
                            <span class="stepsty font36" :class="active > i ? 'title-finish' : 'title-inactive'">
                                {{ item }}
                            </span>
                        </div>
                    </template>
                </van-step>
            </van-steps>
            <div class="border pt36">
                <div class="disFlex">
                    <span class="font60">{{detail.postName}}</span>
                    <span class="tip ts_tip font36" v-if="detail.match == '非常匹配'">非常匹配</span>
                    <span class="tip ts_tip1 font36" v-else>匹配</span>
                </div>
                <div class="textL font40 fontGreenBlue salary">{{detail.postSalary}}</div>
                <div class="disFlex label">
                    <div class="disFlex">
                        <img :src="require('@/assets/images/classroom.png')" alt="">
                        <span class="font40 fontBlack2 name">{{detail.contactPerson}}</span>
                    </div>
                    <div class="disFlex">
                        <img class="list_icon" :src="require('@/assets/images/phone-telephone.png')" alt="">
                        <span class="font40 fontBlack73">{{detail.contactPhoneNumber}}</span>
                    </div>
                </div>
                <div class="flex label">
                    <div class="disFlex">
                        <img :src="require('@/assets/images/city.png')" alt="">
                        <span class="font40 fontBlack2">{{detail.companyName}}</span>
                    </div>
                </div>
            </div>
            <div class="pt32 border">
                <div class="textL font44 fontBlack2 pb">岗位详情</div>
                <div class="textL font40 fontBlack2">【岗位职责】</div>
                <div class="textL font40" v-for="(item, i) in detail.description" :key="i">{{item}}<br><span v-if="i == detail.description.length - 1"><br></span></div>
                <div class="textL font40 fontBlack2">【岗位要求】</div>
                <div class="textL font40" v-for="(item, i) in detail.jobRequire" :key="i">{{item}}<br><span v-if="i == detail.jobRequire.length - 1"><br></span></div>
                <div class="textL font40 fontBlack2">【岗位福利】</div>
                <div class="textL font40" v-for="(item, i) in detail.postWelfare" :key="i">{{item}}<br><span v-if="i == detail.postWelfare.length - 1"><br></span></div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">工作性质</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.postTypeLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">所属部门</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.department}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">招聘人数</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.recruitNum}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">休息制度</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.restLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">年龄范围</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.ageRequire}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">语言要求</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.languageRequireLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">性别要求</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.genderRequireLabel}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">行业要求</div>
                <div class="wid69 textL">
                    <span class="hy font40" v-for="(item, i) in detail.industry" :key="i">{{item}}</span>
                </div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">专业要求</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.professionalRequire}}</div>
            </div>
            <div class="pt32 border flex">
                <div class="font40 fontGrayB9 pr wid30">工作地点</div>
                <div class="font40 fontBlack2 wid69 textL">{{detail.address}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/oldheader.vue'
import { getCurrentInstance,reactive } from 'vue'
export default {
    components: {
        Header
    },
    data() {
        return {
            header_title: '岗位详情',
            detail: {},
            show: false,
            steplist: ['已投递', '面试中', '不合适', '已入职'],
            active: 2,
            id: '',
            api: '',
            token: ''
        }
    },
    mounted() {
        var data = this.$route.query;
        this.id = data.id;
        this.token = this.$store.state.token;
        this.api = getCurrentInstance().appContext.config.globalProperties.$http;
        this.getData();
    },
    methods: {
        goback() {
            this.$router.replace('/olddeliver');
        },
        // 获取个人信息
        getData() {
            var that = this;
            that.api.get('/personnel/h5/deliveryInfo/findByPostId', {id: that.id}).then(res => {
                if(res.data) {
                    res.data.description = res.data.description.split('\n');
                    res.data.jobRequire = res.data.jobRequire.split('\n');
                    res.data.postWelfare = res.data.postWelfare.split('\n');
                    if(res.data.postStatus == 0 || res.data.postStatus == 1) {
                        that.steplist = ['已投递', '面试中', '不合适/已录用', '已入职'];
                        that.active = res.data.postStatus;
                    } else if(res.data.postStatus == 2 || res.data.postStatus == 3) {
                        that.steplist = ['已投递', '面试中', '已录用', '已入职'];
                        that.active = res.data.postStatus;
                    } else if(res.data.postStatus == 4) {
                        that.steplist = ['已投递', '面试中', '不合适'];
                        that.active = 2;
                    }
                    that.detail = res.data;
                }
            })
        }
    }
}
</script>
<style src="@/assets/css/oldment.css"></style>
<style scoped>
#olddeliverdetail {
    width: 100%;
    height: 100%;
}
.pd {
    padding-bottom: 0;
}
.pt36 {
    padding-top: 0.36rem;
}
.name {
    max-width: 2rem;
    overflow: hidden;
    height: 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.steps-finish-icon {
    border: 0.02rem solid #428FFC;
    color: #428FFC;
    border-radius: 50%;
    width: 0.48rem;
    height: 0.48rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.steps-finish-icon span{
    font-size: 0.44rem;
}
.steps-active-icon {
    font-size: 0.32rem;
    background-color: #428FFC;
    color: #fff;
    border-radius: 50%;
    width: 0.48rem;
    height: 0.48rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.title-active {
    color: #428FFC;
}
.steps-inactive-icon {
    font-size: 0.32rem;
    border: 0.02rem solid #B9BCBF;
    color: #B9BCBF;
    border-radius: 50%;
    width: 0.48rem;
    height: 0.48rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.step-item {
    position: relative;
}
.stepsty {
    text-align: left;
    position: absolute;
    width: 1.5rem;
    left: -0.16rem;
    top: 0.6rem;
}
.width2 {
    width: 2rem;
    left: -0.7rem;
}
.salary{
    padding: 0.16rem 0 0.32rem;
    border-bottom: 0.02rem solid #E8E9EC;
}
.wid30 {
    width: 30%;
}
.wid69 {
    width: 69%;
}
.hy {
    font-size: 0.4rem!important;
}
</style>